<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		ul,
		li {
			list-style: none;
		}

		.list {
			width: 600px;
			margin: 100px auto 0;
		}

		.list-item {
			margin-bottom: 10px;
		}

		.list-input {
			width: 240px;
			height: 30px;
			padding: 0 10px;
			border: 1px solid #eee;
			outline: none;
		}

		.list-btn {
			height: 30px;
			line-height: 30px;
			margin-left: 10px;
			font-size: 14px;
			color: #2b95cb;
		}

		.list-add-project {
			margin: 10px 0;
			font-style: 16px;
			color: #ff6600;
		}

		.list-add-box .text {
			line-height: 30px;
		}

		.list-btn1 {
			font-size: 14px;
			padding: 5px 10px;
			margin-left: 10px;
			background-color: #eee;
			border: 1px solid #ccc;
		}

		.list-add-box.hide {
			display: none;
		}
	</style>
</head>

<body>
	<div class="list">
		<form action="#" method="post">
			<ul class="list-box">
				<li class="list-item">
					<input type="text" name="list[]" class="list-input">
					<span class="list-btn list-upmove">[上移]</span>
					<span class="list-btn list-downmove">[下移]</span>
					<span class="list-btn list-delete">[删除]</span>
				</li>
			</ul>
		</form>
		<!-- 添加内容 -->
		<div class="list-add">
			<div class="list-add-project">
				<span class="text">+ 添加项目</span>
			</div>
			<div class="list-add-box hide">
				<span class="text">添加到列表：</span>
				<input type="text" name="list[]" class="list-add-input list-input">
				<span class="list-btn1 list-add-append">添加</span>
				<span class="list-btn1 list-add-cancel">取消</span>
			</div>
		</div>
	</div>
	<script>
		/* 列表的增删和移动
		 *- 编写HTML代码，设计列表的结构与显示样式。
		 *- 编写SmartList对象，用于实现列表的生成。
		 *- 编写Find对象，用于获取指定前缀的元素，查找移动列表项的前后元素。
		 *- 编写List对象，用于创建列表对象，处理上移、下移、删除按钮的单击事件。
		 *- 编写add对象，控制添加区域是否显示、添加到列表内的操作或取消添加操作。 */

		//刷新页面时输入框中默认的值
		let _data_arr = ['JavaScript', 'HTML5', 'CSS3', 'ES6'];
		let _list = document.getElementsByClassName('list')[0];
		//获取需要克隆的模板
		let _list_item = _list.getElementsByClassName('list-item')[0];
		let _list_box = _list_item.parentNode;
		//获取显示按钮
		let _list_project = _list.getElementsByClassName('list-add-project')[0];
		//获取添加项目按钮
		let _list_append = _list.getElementsByClassName('list-add-append')[0];
		//获取取消项目按钮
		let _list_cancel = _list.getElementsByClassName('list-add-cancel')[0];
		//获取添加内容
		let _list_input = _list.getElementsByClassName('list-add-input')[0];
		//获取需要显示隐藏的内容
		let _list_hide = _list.getElementsByClassName('list-add-box')[0];

		//清除box中的默认模板
		_list_box.removeChild(_list_item);
		function createList(val) {
			if (!val) {
				alert('内容不能为空！');
				return false;
			}
			//克隆得到新的节点
			let _list_item_temp = _list_item.cloneNode(true);
			//找到当前克隆节点的输入框，赋值
			_list_item_temp.getElementsByClassName('list-input')[0].value = val;
			//给当前克隆节点绑定上移事件
			_list_item_temp.getElementsByClassName('list-upmove')[0].onclick = function () {
				//当前列表上移代码
				//找到上一个元素节点
				let prevNode = _list_item_temp.previousElementSibling;
				//将当前节点放入前一个节点前
				if (prevNode) {
					_list_box.insertBefore(_list_item_temp, prevNode);
				} else {
					alert('当前已经是第一个了，无法移动！');
				}
			}
			//给当前克隆节点绑定下移事件
			_list_item_temp.getElementsByClassName('list-downmove')[0].onclick = function () {
				//当前列表下移代码
				//找到下一个元素节点
				let nextNode = _list_item_temp.nextElementSibling;
				//将下一个元素节点放入当前元素节点前
				if (nextNode) {
					_list_box.insertBefore(nextNode, _list_item_temp);
				} else {
					alert('当前已经是最后一个了，无法移动！');
				}
			}
			//给当前克隆节点绑定删除事件
			_list_item_temp.getElementsByClassName('list-delete')[0].onclick = function () {
				if (confirm('是否删除当前项?')) {
					_list_box.removeChild(_list_item_temp);
				}
			}
			_list_box.appendChild(_list_item_temp);
		}

		//循环生成默认列表
		for (let v of _data_arr) {
			createList(v);
		}

		_list_append.onclick = function () {
			//节点添加
			createList(_list_input.value);
			//输入框内容清空
			_list_input.value = '';
		}

		_list_project.onclick = function () {
			_list_hide.classList.remove('hide');
		}

		_list_cancel.onclick = function () {
			_list_hide.classList.add('hide');
		}
	</script>
</body>

</html>